<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:用户中心首页
@author:成都市一颗优雅草科技有限公司     
@version V5.x 
注意：本前端源码遵循 MulanPSL-2.0开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   企业客服QQ:2853810243  官方客户·技术交流群 929353806交流群 929353806
 -->
<template>
	<view class="body" @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
		<refresh ref="refresh" @isRefresh="isRefresh"></refresh>
		<view class="status_bar"></view>

		<scroll-view scroll-y="true" class="scroll-view" :style="{'height': `${windowHeight - 120}px`}">

			<view class="user-info-wrapper">
				<view class="method1-bur2"
					:style="{backgroundImage: user!=null?'url(' + formatUrl(user.head_img,5) + ')':'url(' + coverImgUrl + ')', backgroundSize:'100% ', }">
				</view>
				<view class="head-content" @tap="tabSetting">
					<image src="/static/img/setting.png" class="setting-img"></image>
					<!-- <text class="setting-text">设置</text> -->
				</view>
				<view class="user-info-head">
					<image class="head-img" mode="aspectFill"
						:src="user!=null?formatUrl(user.head_img,5):'/static/logo.png'" @tap="tapAvater"></image>
					<view class="user-info-content-wrapper" @tap="tapUser">
						<text class="user-name">{{user!=null?user.name:'登录/注册'}}</text>
						<view class="vip-icon-wrapper" v-show="is_active">
							<image src="/static/icon/vip-zuan@2x.png" mode="aspectFill"></image>
							<text>已经开通会员</text>
						</view>
						<text class="user-id" v-if="user==null">登陆一下，内容更精彩</text>
						<text class="user-id" v-if="user!=null">ID: {{user.custom_id==null?'未设置':user.custom_id}}</text>
						<text class="user-id" v-if="user!=null">金币: {{user.money}}</text>
					</view>
				</view>
				<view class="info-wrapper">
					<view class="info-item" @tap="toFans">
						<text class="count">{{user!=null?user.fans_count:'0'}}</text>
						<text class="count-title">粉丝</text>
					</view>
					<view class="info-item info-item-center" @tap="toFollow">
						<text class="count">{{user!=null?user.follow_count:'0'}}</text>
						<text class="count-title">关注</text>
					</view>
					<view class="info-item info-item-center">
						<text class="count">{{user!=null?user.skr_count:'0'}}</text>
						<text class="count-title">获赞</text>
					</view>
					<view class="info-item" @tap="toShare">
						<text class="count">{{user!=null?user.invite_count:'0'}}</text>
						<text class="count-title">推广</text>
					</view>
				</view>
			</view>
			<view class="item-list-wrapper">
				<view class="item-my-weapper">
					<view class="i-m-w-left">
						<view class="i-m-left">
							<image src="/static/img/defalt.png"></image>
						</view>
						<view class="i-m-right" @click="tapItem(15)">
							<view class="i-m-video">视频</view>
							<view class="i-m-release">发布视频 <image src="/static/img/m-arrow.png"></image>
							</view>
						</view>
					</view>
					<view class="i-m-w-right">

						<view class="i-m-left">
							<image src="/static/img/m-bihua.png"></image>
						</view>
						<view class="i-m-right" @click="tapItem(0)">
							<view class="i-m-video"  >视频</view>
							<view class="i-m-release"  > 我的视频<image src="/static/img/m-arrow.png"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="list-row">
				<!-- 	<view class="list-item" @click="tapItem(1)">
						<image src="/static/icon/item-1.png"></image>
						<text>我的作品</text>
					</view> -->
					<view class="list-item" @tap="CardSecretExchange">
						<image src="/static/img/1.png"></image>
						<text>卡密兑换</text>
					</view>
					<view class="list-item" @click="tapItem(8)">
						<image src="/static/img/2.png"></image>
						<text>个人资料</text>
					</view>
					<view class="list-item" @click="tabVip()">
						<image src="/static/img/3.png"></image>
						<text>VIP充值</text>
					</view>
					<view class="list-item" @click="tapItem(4)">
						<image src="/static/img/4.png"></image>
						<text>提现金币</text>
					</view>
					<view class="list-item" @click="tapItem(13)">
						<image src="/static/img/5.png"></image>
						<text>我的推广</text>
					</view>

				</view>
				<!-- 作品展示 -->
				 <view class="" v-if="user==null" style="text-align: center; color:#999;padding-bottom: 20rpx; width: 80%;margin: 0 auto;margin-top: 40rpx;"  >
				 	  请登录查看本部分信息，包含 "我的作品" "我的喜欢" "我的答题记录"
				 </view>
				<view class="works-list" v-if="user!==null">
					<view class="works-title-Content">
						<view class="works-name" @click="tab(0)"  :class="{worksActive:currentTab==0}">我的帖子 <text>{{videoListContent.length}}</text></view>
						<view class="works-name" @click="tab(1)" :class="{worksActive:currentTab==1}">我的喜欢 <text>{{list.length}}</text></view>
						<view class="works-name" @click="tab(2)" :class="{worksActive:currentTab==2}">答题记录<text>{{lists.length}}</text></view>
					</view>
				 <view>
					<swiper :style="{'height':swiperHeight+'px'}"  :current="currentTab" duration="300"
						@change="swiperTab" v-if="user!==null">
						<swiper-item>
							<view class="component" style="padding-bottom: 30rpx;">
								<view class="works-list-item" v-for=" item in videoListContent" v-if="videoListContent.length>0">
									
									<view class="works-header">
										<view class="w-header-icon">
											<image :src="item.head_img" mode="aspectFill"></image>
										</view>
										<view class="w-header-text">
											<view>{{item.name}} <text class="text-icon"></text></view>
											<view class="w-header-subTitle">{{item.create_time}}</view>
										</view>
									</view> 
								<view class="works-list-word"> {{item.title}}</view>
									<view class="works-img">
										<image :src="item.img" mode="aspectFill"></image>
									</view>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
					<view class="component">
						<view class="body">
							<list @loadmore="loadmore">
								<cell v-for="(item, index) in list" :key="index">
									<view class="item" @tap="_play(item)">
										<view class="cover-box">
											<image class="cover" :src="item.img" mode="aspectFill"></image>
											<text class="title2">{{ item.title }}</text>
										</view>
									</view>
								</cell>
							
							</list>
						</view>
					</view>
					</swiper-item>
						<swiper-item>
							<view class="component">
								<view class="subject-record">
									<list class="list" offset-accuracy=100 show-scrollbar=false v-if="lists.length">
										<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
											<loading-indicator class="indicator"></loading-indicator>
										</refresh>
										<cell class="cell" v-for="item in lists" :key="item.id">
											<view class="record-item">
												<text class="fs-28 record-title">视频标题：{{ item.title }}</text>
												<view style="flex-direction: row;justify-content: space-between;align-items: center;">
													<view>
														<text class="fs-28 mb-10">答对：{{ item.true_num }} 题</text>
														<text class="fs-28">答错：{{ item.error_num }} 题</text>
													</view>
													<view>
														<text class="text-orange text-r mb-10">+ {{ item.all_gold }} 积分</text>
														<text class="fs-28 text-r text1-1">{{ item.create_time }}</text>
													</view>
												</view>
											</view>
										</cell>
									<!-- 	<loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
											<text class="indicator-text">{{ isEnd ? '没有更多了' : '加载更多中 ...' }}</text>
										</loading> -->
									</list>
								</view>
								
							</view>
						</swiper-item>
					</swiper>
					</view>

				</view>
				<!-- 			<view class="list-row">
				
					<view class="list-item" @click="tapItem(4)">
						<image src="/static/icon/item-6.png"></image>
						<text>提现金币</text>
					</view>
					<view class="list-item" @click="tapItem(5)">
						<image src="/static/icon/item-8.png"></image>
						<text>账变记录</text>
					</view>
					<view class="list-item" @click="tapItem(7)">
						<image src="/static/icon/item-5.png"></image>
						<text>推广记录</text>
					</view>
				</view> -->
				<!-- 			<view class="list-row">
						<view class="list-item" @click="tabVip()">
						<image src="/static/icon/item-10.png"></image>
						<text>VIP充值</text>
					</view>
					<view class="list-item" @click="tabIntegral()">
						<image src="/static/icon/item-10.png"></image>
						<text>金币充值</text>
					</view>

							<view class="list-item" @click="tapItem(8)">
						<image src="/static/icon/item-11.png"></image>
						<text>个人资料</text>
					</view>
				</view> -->
				<!-- 			<view class="list-row">
					<view class="list-item" @click="tapItem(9)">
						<image src="/static/icon/shoucang.png"></image>
						<text>我的收藏</text>
					</view>
					<view class="list-item" @click="tapItem(10)">
						<image src="/static/icon/liaotian.png"></image>
						<text>我的聊天</text>
					</view>

					<view class="list-item" @tap="h5">
						<image src="/static/icon/H5.png"></image>
						<text>访问H5</text>
					</view>
				</view> -->
				<!-- 			<view class="list-row">
					<view class="list-item" @click="tapItem(12)">
						<image src="/static/icon/question.png"></image>
						<text>答题记录</text>
					</view>
					<view class="list-item" @click="tapItem(1)">
						<image src="/static/icon/item-2.png"></image>
						<text>我的帖子</text>
					</view>
					<view class="list-item" @click="tapItem(13)">
						<image src="/static/icon/item-5.png"></image>
						<text>我的推广</text>
					</view>
				</view> -->
				<!-- 		<view class="list-row">
					<navigator url="/pages/index/user/category-search/category-search" hover-class="none"
						class="list-item">
						<image src="/static/icon/category-search.png"></image>
						<text>栏目搜索</text>
					</navigator>
						<view class="list-item" @tap="CardSecretExchange">
						<image src="/static/icon/item-10.png"></image>
						<text>卡密兑换</text>
					</view>
					<view class="list-item"></view>
				</view> -->
							<view class="copy" >
					系统开发商：一颗优雅草科技-YYC松鼠短视频</br>
					松鼠官网：songshu.youyacao.com</br>
					优雅草官网：www.youyacao.com</br>
					本系统所有内容仅供功能演示不做其他一切商业用途</br>
					Copyright ©优雅草科技 2015-2021 All rights reserved
					</br>
					服务器：腾讯云 内容安全：知道创宇 美颜剪辑：涂图 </br>
				</view>
				<!-- <view class="list-row">
						<view class="list-item" @click="tapItem(3)">
							<image src="/static/icon/item-10.png"></image>
							<text>卡密</text>
						</view>
						<view class="list-item" @click="tapItem(4)">
							<image src="/static/icon/item-5.png"></image>
							<text>我的积分</text>
						</view>
						<view class="list-item" @click="tapItem(5)">
							<image src="/static/icon/item-6.png"></image>
							<text>我的收益</text>
						</view>
					</view>
					<view class="list-row">
						<view class="list-item" @click="tapItem(6)">
							<image src="/static/icon/item-7.png"></image>
							<text>我的店铺</text>
						</view>
						<view class="list-item" @click="tapItem(7)">
							<image src="/static/icon/item-8.png"></image>
							<text>邀请好友</text>
						</view>
						<view class="list-item" @click="tapItem(8)">
							<image src="/static/icon/item-9.png"></image>
							<text>我的排行榜</text>
						</view>
					</view> -->
			</view>
		</scroll-view>
		<view class="user-foot"></view>
	</view>
</template>

<script>
	 const modal = weex.requireModule('modal')
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import refresh from '@/components/refresh/refresh.vue'
	import videoPage from '@/components/video/video-page.vue'
	import api from '@/api/index.js'
	export default {
		components: {
			videoPage,
			refresh
		},
		data() {
			return {
				coverImgUrl: "/static/logo.png",
				windowHeight: 0,
				height: '667px',
				width: '',
				swiperHeight:0,
				videoListContent:[],
				is_active: false,
				list: [],
				currentTab:0,
				lists:[],
				refreshing: false,
				loadinging: false,
				isEnd: false,
				loadmore:false,
				loading:false,
				videoData: {
					type: 'user',
					data: [],
					page: 1,
					isMore: true
				},
			
			}
		},
		mounted() {
			
			
		},
		created() {
			this.windowHeight = uni.getSystemInfoSync().windowHeight
			this.$nextTick(() => {
				setTimeout(() => {
					
					if (this.isVip()) {
						this.is_active = true;
					
					}
				}, 500)
			})
		},
		
		onShow() {
			 console.log(9999999999)
		
		},
		methods: {
			...mapMutations(['IMlogin', 'IMlogout']),
			govideo(){
				// url: '/pages/index/publish/publish'
			},
				getRecord() {
					api.subjectResult({
						page: this.page,
						pageSize: 10
					}).then(({
						data
					}) => {
						if (data.code === 0) {
							if (data.data.page === 1) {
								this.lists = data.data.list
							} else {
								this.lists = this.lists.concat(data.data.list)
							}
							if (data.data.page >= data.data.page_count) {
								this.isEnd = true
							}
						}
					})
				},
			
			tab(index) {
				this.currentTab=index;
				 console.log(index)
			},
			//轮播图切换
			swiperTab() {
				let query = uni.createSelectorQuery().in(this);
				query.selectAll(".component").boundingClientRect();
				console.log(query.select(".component"))
				query.exec((res) => {
					this.swiperHeight = res[0][this.currentTab].height;
					console.log(res[0][this.currentTab].height)
					console.log(res)
				})
			},


			//获取喜欢
			getLikeVideoList() {
				api.LikeVideoList().then(({
					data
				}) => {
					this.loading = true
					// console.log(data)
					this.list = data.data
				})
			},
			// 个人作品
			loadData() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				var that=this;
				
				this.page = 1;
				//获取视频信息
				this.$api.videoList({
					type: 'user',
					page: this.page
				}).then((res) => {
					this.loadmore = false
					uni.hideLoading()
					this.$refs.refresh.endAfter() //刷新结束调用
					if (res.data.code == 1) {
						return;
					}
					that.videoListContent = res.data.data;
				
					setTimeout(function(){
							that.swiperTab();
					},1000)
			

				}).catch(res => {
					this.isMore = false;
					uni.hideLoading()
					this.$refs.refresh.endAfter() //刷新结束调用
				})
			},

			CardSecretExchange() {
				modal.prompt({
					message: '请输入卡密进行兑换',
					okTitle: '立即兑换',
					cancelTitle: '取消'
				}, ({
					result,
					data
				}) => {
					if (result === '立即兑换') {
						this.$api.CardSecretExchange({
							code: data
						}).then(res => {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						})
					}
				})
			},
			isVip() {
				return this.user && this.user.is_vip;
			},
			tapItem(index) {
				switch (index) {
					case 0: //我的作品
						uni.navigateTo({
							url: "/pages/index/user/subItem/create"
						})
						break;
					case 1: // 我喜欢的
						uni.navigateTo({
							url: "/pages/index/user/like-video/like-video"
						})
						break;
					case 2: // 我的下载
						uni.navigateTo({
							url: '/pages/index/download/download'
						})
						break;
					case 4: //金币提现
						uni.navigateTo({
							url: '/pages/index/user/withdraw'
						})
						break;
					case 5: //金币提现
						uni.navigateTo({
							url: '/pages/index/user/change'
						})
						break;
					case 7: //推广记录
						uni.navigateTo({
							url: '/pages/index/user/inviterecord'
						})
						break;
					case 8: //金币提现
						uni.navigateTo({
							url: '/pages/setting/account'
						})
						break;
					case 9: //我的收藏
						uni.navigateTo({
							url: '/pages/index/user/collection/collection'
						})
						break;
					case 10: //我的聊天
						uni.navigateTo({
							url: '/pages/im-chat/im-list'
						})
						break;
					case 11: //访问h5
						uni.navigateTo({
							url: '/pages/im-chat/im-list'
						})
						break;
					case 12: //访问答题记录
						uni.navigateTo({
							url: '/pages/index/user/subject/record'
						})
						break;
					case 13: //我的推广
						uni.navigateTo({
							url: '/pages/index/user/invite/invite'
						})
						break;
					case 14: //我的帖子
						uni.navigateTo({
							url: '/pages/index/user/subItem/textimage'
						})
						break;
						case 15: //我的视频
							uni.navigateTo({
								url: '/pages/index/publish/publish'
							})
							break;
				}
			},
			h5() {
				plus.runtime.openURL('https://videoh5.youyacao.com/');
			},
			refreshStart(e) {
				this.$refs.refresh.refreshStart(e);
			},
			refreshMove(e) {
				this.$refs.refresh.refreshMove(e);
			},
			refreshEnd(e) {
				this.$refs.refresh.refreshEnd(e);
			},
			//刷新名需写为isRefresh,刷新组件中会回调此事件
			isRefresh() {
				this.refresh();
			},
			//格式化链接地址
			formatUrl(url1) {
				return url1 && this.$utils.formatUrl(this, url1)
			},
			_play(item) {
				uni.navigateTo({
					url: `/pages/index/user/like-video/player/player?src=${encodeURIComponent(item.url)}`
				})
			},
			tabVip() {
				uni.navigateTo({
					url: '/pages/index/user/vip'
				})
			},
			tabIntegral() {
				uni.navigateTo({
					url: '/pages/index/user/integral'
				})
			},
			tabSetting() {
				uni.navigateTo({
					url: '/pages/setting/index'
				})
			},
			tapAvater() {
				if (this.user == null) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths[0]);
						uni.uploadFile({
							url: this.$store.state.baseUrl + '/api/api/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'type': 'img'
							},
							success: (res) => {

								if (res.statusCode != 200) {
									uni.showToast({
										title: '网络错误',
										icon: 'none'
									});
									return;
								}
								var data = JSON.parse(res.data);
								if (data.code == 1) {
									uni.showToast({
										title: data.msg,
										icon: 'none'
									});
									return;
								}
								//调用更新用户信息接口
								this.$api.userUpdate({
									head_img: data.data.url
								}).then((res1) => {
									if (res1.data.code == 1) {
										uni.showToast({
											title: res1.data.msg,
											icon: 'none'
										});
										return;
									}
									uni.showToast({
										title: '修改头像成功'
									});
									this.$store.dispatch('getUserInfo');
								});
							}
						});
					}
				});
			},
			tapUser() {
				if (this.user == null) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
			},
			toFans() {
				if (this.user == null) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				uni.navigateTo({
					url: '/pages/index/user/follow?type=fans'
				})
			},
			toFollow() {
				if (this.user == null) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				uni.navigateTo({
					url: '/pages/index/user/follow?type=follow'
				})
			},
			toShare() {
				uni.navigateTo({
					url: '/pages/index/user/inviterecord'
				})
			},
			getInfo() {
				if (this.user == null) {
					return;
				}
				//获取用户信息
				this.$store.dispatch('getUserInfo');
				this.IMlogin(this.user.phone);
			},
			refresh() {
				this.getInfo()
				this.$refs.refresh.endAfter()
			}
		},
		computed: {
			user() {
				if(this.$store.state.user){
					this.loadData();
					this.getLikeVideoList();
					this.getRecord();
				}
			
				return this.$store.state.user || null;
			}
		}
	}
</script>

<style lang="scss">
	page{
	background-color: #fff;
	}
	.subject-record {
		flex: 1;
	}
	
	.text1-1 {
		color: #CCCCCC;
	}
	
	.fs-28 {
		font-size: 28rpx;
	}
	
	.mb-10 {
		margin-bottom: 10rpx;
	}
	
	.text-r {
		text-align: right;
	}
	
	.record-title {
		border-bottom-color: #E6E7EB;
		border-bottom-width: 1px;
		padding-bottom: 15rpx;
		margin-bottom: 15rpx;
	}
	
	.record-item {
		margin-bottom: 20rpx;
		background-color: #F7F8FA;
		padding: 20rpx 15rpx;
	}
	
	.refresh {
		width: 750rpx;
		align-items: center;
	}
	
	.loading {
	    width: 750rpx;
	    align-items: center;
	}
	
	.indicator-text {
		color: #888888;
		font-size: 28rpx;
		text-align: center;
		padding: 16rpx 0;
	}
	
	.indicator {
		height: 40rpx;
		width: 40rpx;
		margin: 16rpx 0;
		color: blue;
	}
	
	.text-orange {
		color: #FF3000;
	}
	.cover-box{
		position: relative;
	}
		.alert {
			text-align: center;
			font-size: 24rpx;
			padding: 32rpx 0;
		}
		.title2 {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 0 32rpx;
			height: 80rpx;
			lines: 1;
			text-overflow: ellipsis;
			line-height: 80rpx;
			background-image: linear-gradient(to top, #000, transparent);
			color: #FFFFFF;
			font-size: 28rpx;
		}
		.cover {
			width: 750rpx;
			height: 375rpx;
		}
		.item {
			margin-bottom: 32rpx;
		}
	
	.works-list {
		.works-title-Content {
			display: flex;
			justify-content: space-between;
			width: 70%;
			margin: 0 auto;
			margin-bottom: 41rpx;
			.works-name{
				color: #333;
			}
			.worksActive{
				position: relative;
				font-weight: bold;
				color: #333;
			}
				.worksActive::before{
					position: absolute;
					left: 30%;
					bottom: -10rpx;
					content:"";
					width: 40rpx;
					height: 5rpx;
					background: #000000;
					border-radius: 4rpx;
				}
		}

		.works-list-item {
			width: 90%;
			margin-bottom: 20rpx;
			.works-img{
		width: 582rpx;
		height: 328rpx;
		margin: 0 auto;
		overflow: hidden;
			 padding-left: 146rpx;
		image{
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
		}
			}
			.works-list-word {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				padding-left: 146rpx;
				padding-top: 24rpx;
				line-height: 40rpx;
				margin-bottom: 30rpx;
			}

			.works-header {
				display: flex;
				padding-left: 32rpx;
				padding-right: 32rpx;

				.w-header-text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;

					.w-header-subTitle {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						margin-top: 15rpx;

					}
				}

				.w-header-icon {
					width: 88rpx;
					height: 88rpx;
					margin-right: 16rpx;
	         
					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
						border: 1px solid #000000;
					}
				}
			}
		}
	}

	.item-my-weapper {
		margin-top: 32rpx;
		display: flex;
		width: 100%;
		justify-content: space-around;
		box-sizing: border-box;

		.i-m-w-left {
			width: 328rpx;
			height: 128rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 1rpx solid #E6E6E6;
			display: flex;
			justify-content: center;
			align-items: center;

			.i-m-left {
				width: 64rpx;
				height: 64rpx;
				margin-right: 16rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.i-m-right {
				.i-m-video {
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
				}

				.i-m-release {
					color: #999999;
					font-size: 26rpx;
					margin-top: 4rpx;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-left: 12rpx;
					}
				}
			}
		}

		.i-m-w-right {
			width: 328rpx;
			height: 128rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 1rpx solid #E6E6E6;
			display: flex;
			justify-content: center;
			align-items: center;

			.i-m-left {
				width: 64rpx;
				height: 64rpx;
				margin-right: 16rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.i-m-right {
				.i-m-video {
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
				}

				.i-m-release {
					color: #999999;
					font-size: 26rpx;
					margin-top: 4rpx;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-left: 12rpx;
					}
				}
			}
		}
	}


	.user-foot {
		flex: 1;
		background-color: #000000;
	}

	.copy {
		margin-top: 20px;
		text-align: center;
		color: #93a7b3;
		font-size: 12px;
		margin-bottom: 20px;
	}

	.status_bar {
		width: 100%;
		height: var(--status-bar-height);
	}

	.head-content {
		// background-color: #418cde;
		height: 88rpx;
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.setting-img {
		width: 36rpx;
		height: 36rpx;
		margin-right: 12rpx;
	}

	.setting-text {
		font-size: 30rpx;
		color: #FFFFFF;
	}

	.user-info-wrapper {
		position: relative;
		border-radius: 10rpx;
		background: #3370b2;

		overflow: hidden;
		// margin: 0 24rpx;

	}

	.method1-bur2 {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;

		/* 关键模糊属性  */
		filter: blur(8px);

	}

	.method1-bur2::before {
		position: absolute;
		content: '';
		width: 100%;
		height: 100%;
		z-index: 100;
		background: rgba(0, 0, 0, .3)
	}


	.user-info-wrapper::before {
		content: '';
		width: calc(100% + 20px);
		height: calc(100% + 20px);
		display: block;
		position: absolute;
		left: -10px;
		top: -10px;
		background: inherit;
		box-shadow: inset 0 0 200px rgba(255, 255, 255, 0.25);
		filter: blur(30px);
		overflow: hidden;
		border-radius: 14px;
		z-index: -1;

	}

	.user-info-head {
		padding: 48rpx 48rpx 24rpx;
		margin-bottom: 24rpx;
		display: flex;

		.head-img {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
		}

		.user-info-content-wrapper {
			position: relative;
			flex: 9;
			display: flex;
			flex-direction: column;
			margin-left: 24rpx;
			justify-content: center;

			.user-name {
				font-size: 36rpx;
				color: #F0F0F0;
			}

			.user-id {
				margin-top: 12rpx;
				font-size: 24rpx;
				color: #F0F0F0;
			}

		}
	}

	.info-wrapper {
		background: #3370b2;
		border-radius: 10px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-bottom: 48rpx;

		.info-item {
			position: relative;
			flex: 1;
			display: flex;
			// // flex-direction: column;
			justify-content: center;
			// align-items: center;
			// align-content: center;
		}

		.info-item .count {}

		.info-item-center {
			margin-left: -1px;
		}

		.info-item-center:before {
			content: '';
			position: absolute;
			left: 0;
			top: 25%;
			bottom: auto;
			right: auto;
			height: 52%;
			width: 1px;
			background: rgba(255, 255, 255, 0.6);
		}

		.info-item-center:after {
			content: '';
			position: absolute;
			right: 0;
			top: 25%;
			bottom: auto;
			height: 52%;
			width: 1px;
			background: rgba(255, 255, 255, 0.6);
		}

		.count {
			font-size: 40rpx;
			color: #fff;
			margin-right: 20rpx;
		}

		.count-title {
			font-size: 24rpx;
			margin-top: 12rpx;
			color: #FFFFFF;
		}
	}

	.item-list-wrapper {
		background: rgba(255, 255, 255, 1);
		// border-radius: 10px;
		// margin: 24rpx 24rpx 48rpx 24rpx;
		// padding: 0 24rpx;
		display: flex;
		flex-direction: column;

		.list-row:last-child {
			border-bottom: none;
		}

		.list-row {
			// border-bottom: 1rpx solid rgba($color: #000000, $alpha: 0.08);
			display: flex;
			flex-direction: row;
			// justify-content: space-between;
			align-items: center;
			height: 230rpx;

			.list-item {
				width: 20vw;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				align-content: center;

				image {
					width: 70rpx;
					height: 70rpx;

				}

				text {
					margin-top: 40rpx;
					font-size: 25rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 10rpx;
				}
			}

		}
	}

	.vip-icon-wrapper {
		margin-left: 14rpx;
		background: #000000;
		border-radius: 15rpx;
		height: 40rpx;
		width: 200rpx;
		text-align: center;
		line-height: 40rpx;

		text {
			margin-left: 8rpx;
			font-size: 10px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #F12F5B;
		}

		image {
			height: 22rpx;
			width: 25rpx;
		}
	}

	.body {
		// background-color: #418cde;
		flex: 1;
	}

	page {
		display: flex;
	}
</style>
